<template>
    <div id="wrapper">
      <div class="equipment-seach equipment-bg mt-88 fixed-top " style="z-index:66">
         <div class="container-ms px-20 pb-15" >
           <div class="container-inp bg-fff" @click="goSearchAll">
             <span class="color-ccc f30">搜索游戏</span>
           </div>
         </div>
      </div>
        <div class="home mt-88" >
            <!---------------------------- 游戏列表 ------------------------------>
            <div class="search-game mt-75 mb-95" >
                <div class="tab">
                    <div class="tab-head" ref="header">
                        <ul class="tab-nav">
                          <router-link :to="{ name: 'GameList', params: { gameType: 2}}">
                              <li :class="{'active': selectGameType != 1}">
                                <a class="sj">手游</a>
                              </li>
                          </router-link>
                          <router-link @click="changeType()" :to="{ name: 'GameList', params: { gameType: 1}}">
                            <li :class="{'active': selectGameType == 1}" >
                              <a class="dn">端游</a>
                            </li>
                          </router-link>
                        </ul>
                    </div>
                    <div class="tab-body" ref="tab">
                        <div v-show="!finishFirstLoad" style="height: 100vh">
                            <div class="preloader-indicator-modal" style=" "><span
                                    class="preloader preloader-white"></span></div>
                        </div>
                        <template v-show="finishFirstLoad">
                            <div class="tab-class01" :style="{ 'min-height': tabHeight + 'px'}" ref="tabClass"
                                 v-show="displayList.length>0">
                                <div>
                                    <ul>
                                        <li v-for="(item,index) in displayList" :key="item.id" >
                                            <a @click="nextPage(item)">
                                                <img :src="item.game_image_url">
                                                <p>{{item.name}}</p></a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="tab-letter" :class="{'tab-letter-fixed': isLetterFixed }"
                                 :style="{  'height':isLetterFixed? fixLetterHeight+'px' :tabHeight+'px '}"
                                 ref="tabLetter">
                                <a @click="checkHotButton" :class="{'active':isHotActive}"><span class="hot-img"></span></a>
                                <a @click="checkMenu(item,index)" v-for="(item,index) in menuList"
                                   :class="{'active':menuIndex==index && isHotActive==false}">{{item}}</a>
                            </div>
                        </template>
                    </div>
                </div>
                <goTopComponent></goTopComponent>
            </div>

        </div>
        <footerComponent :active="'buy'"></footerComponent>
    </div>
</template>
<script>
    import goTopComponent from "components/common/GoTop.vue"
    import footerComponent from 'components/Footer'
    import {mapState, mapGetters, mapActions} from 'vuex';
    export default {
        data() {
            return {
                //浏览器获得的参数
                listQueryData: {},
                menuQueryData: {},
                //需要传给下个页面的参数
                postData: {},
                //从服务端获得的游戏列表，菜单列表,点首字母获得的列表
                gameList: [],
                gameList1: [],
                gameList2: [],
                menuList: [],
                isHotActive: true,
                menuIndex: -1,
                //显示列表
                selectGameType: this.$route.params.gameType,
                displayList: [],
                displayIndex: 1,
                displaySize: 60,
                //loadmore 组件使用
                allLoaded: false,
                swiperOption: {
                    autoplay: 0,
                    freeMode: true,
                    pagination: '.swiper-pagination',
                    slidesPerView: 4,
                },
                finishFirstLoad: false,
                //样式
                isLetterFixed: false,
                tabTop: 0,
                tabHeight: 0,
                fixLetterHeight: 0,
                scrollTop: 0,
                isAjax:true
            }
        },
        components: {
            goTopComponent,
            footerComponent
        },
        created: function () {
            this.setDefaultValues();
        },
        mounted: function () {
            this.getGameList();
            this.getMenuList();
            this.getislogin();
            this.$bus.emit('headerText', '我要买')
            this.$bus.emit('typeStyle', 'header-bgbuy')
        },
        watch: {
          '$route': {
            handler: function(val){
              this.changeGameType(val.params.gameType)
            }
          },
            scrollTop: {
                handler: function (val, oldVal) {
                    let self = this;
                    self.tabHeight = this.$getScreenHeight() - self.$refs.tab.getBoundingClientRect().top - 1;
                    self.tabHeight = self.tabHeight > self.fixLetterHeight ? self.fixLetterHeight : self.tabHeight;
                    if (val > self.tabTop) {
                        self.isLetterFixed = true;
                    }
                    else {
                        self.isLetterFixed = false;
                    }

                    if (self.$isBottom(200)&&this.abctrue) {
                        self.loadBottom();
                    }
                },
                deep: true
            }
        },
        methods: {
            ...mapActions({
                getislogin: 'common/COMMON_ISLOGIN'
            }),
            setDefaultValues: function () {
                let self = this;

                self.listQueryData.gameType = self.selectGameType;
                self.listQueryData.pageIndex = 1;
                self.listQueryData.pageSize = 15;
                self.listQueryData.firstPY = "HOT";
                self.menuQueryData.gameType = self.selectGameType;
                self.$bus.emit('headerText', self.$route.query.tName);

            },
            watchGoTop: function () {
                var self = this;
                window.addEventListener('scroll', function () {
                    self.scrollTop =   self.$scrollTop()+ document.documentElement.scrollTop;
                });
            },
            calHeights: function () {
                this.tabTop = this.$refs.tab.getBoundingClientRect().top;
                this.tabHeight = this.$getScreenHeight() - this.$refs.tab.getBoundingClientRect().top - 1;
                this.fixLetterHeight = this.$getScreenHeight() - this.$refs.header.getBoundingClientRect().height - 1;
            }
            ,
            changeType:function(){
              this.listQueryData.pageIndex = 1;
              this.listQueryData.pageSize = 15;
              this.listQueryData.firstPY = "HOT";
             },
            getGameList: function () {
              console.log('----',this.listQueryData)
              var isNewlist = {};
              isNewlist.page = this.listQueryData.pageIndex;
              isNewlist.pageCount = this.listQueryData.pageSize;
              isNewlist.tableName="category";
              isNewlist.sortMap={
                "popular_sort":"-"
              }
              if(this.listQueryData.gameType==1){
                isNewlist.sortMap={
                  "popular_sort":"-",
                  "create_time":"+"
                }
              }
              isNewlist.accurateMap = {
                "game_type": [this.listQueryData.gameType+""],
                "is_hot":["1"],
                "first_py":[this.listQueryData.firstPY+""],
              }
              if(this.listQueryData.firstPY=="HOT"){
                delete isNewlist.accurateMap.first_py
              }else{
                delete isNewlist.accurateMap.is_hot
              }
              this.abctrue=false
                return new Promise((resolve,reject)=>{
                  let self = this;
                  self.$http.post(self.$CONSTANTS.P30006 + 'goodsSearch/goodsSearchList',
                    isNewlist).then(function (res) {
                    console.log('-----------',res)
                    if (res.data && res.data.responseStatus.code == "00" && res.data.result) {

                      self.gameList = JSON.parse(res.data.result).items;
                      console.log('-----------',self.gameList)
                      if (self.listQueryData.gameType == 1) {
                        self.gameList1 = self.gameList;
                      }
                      else {
                        self.gameList2 = self.gameList;
                      }

                    }
                  }).then(function (response) {
                    self.$nextTick(function () {
                      self.finishFirstLoad = true;
                      self.calHeights();
                      self.watchGoTop();
                      if(this.isAjax){
                        self.checkHot();
                      }

                    });
                    this.abctrue=true;
                    resolve(self.gameList)
                  }), (function (response) {
                  })
                })

            }
            ,
            getMenuList: function () {
                let self = this;

                self.$http.post(self.$CONSTANTS.P30006 + 'category/getgamepy', self.menuQueryData).then
                (function (response) {
                    if (response.data && response.data.responseStatus.code == "00") {
                        self.menuList = response.data.py;
                        if (self.menuQueryData.gameType == 1) {
                            self.menuList1 = self.menuList;
                        }
                        else {
                            self.menuList2 = self.menuList;
                        }
                    }
                });
            }
            ,
            nextPage: function (item) {
                let self = this;

                //增加浏览记录
                if (this.$isLocalStorageSupported()) {
                  let obj = {
                    gameId: item.game_id,
                    gameName: item.name,
                    gameType: this.$route.params.gameType.toString()
                  }
                  if (this.$route.params.gameType==2) {
                    Object.assign(obj, {
                      goodsType: '2',
                      typeName: '游戏帐号',
                    })
                  } else {
                    obj.mainGid = item.game_id
                  }
                  this.$saveBrowseHistory(obj)
                }
                if (self.selectGameType == 1) {
                    self.$router.push({
                        name: "ChooseClass",
                        query: {
                            gid: item.game_id,
                            gname: item.name,
                            gameType: item.game_type,
                            type: 'special',

                        },
                    })
                }
                else {
                    if (_hmt) _hmt.push(['_trackPageview', `/vue/mobile-game/goods-list2/${item.game_id}/${item.name}/2`]);
                    self.$router.push({
                        name: "MobileGameList2",
                        params: {
                        gameId: item.game_id,
                        gameName: item.name,
                        goodsType: 2,
                    },
                  })
                }
            }
            ,
            checkHotButton:function () {
              this.finishFirstLoad = false
              let self = this;
              self.isHotActive = true;
              this.listQueryData.pageIndex = 1;
//              self.listQueryData.pageIndex++;
              self.displayList = [];
              self.listQueryData.firstPY = "HOT";

              this.isAjax = false;
              self.menuIndex = -1;
//                self.updateDisplayListByFirst(item);
              self.$nextTick(function () {
                  self.$scrollTop(0)
                // document.body.scrollTop = 0;
                // document.documentElement.scrollTop = 0;
              });
              this.getGameList().then(()=>{
                this.updateDisplayList();
              })
            },
            checkHot: function () {
                let self = this;
//                self.isHotActive = true;
                self.allLoaded = false;

              if(!this.clearAttr){
                self.displayList = [];
              }
                self.displayIndex = 1;
                self.$refs.tabLetter.scrollTop = 0;
                if (self.selectGameType == 1) {
                    self.gameList = self.gameList1;
                    self.menuList = self.menuList1;
                }
                else {
                    self.gameList = self.gameList2;
                    self.menuList = self.menuList2;
                }

                self.updateDisplayList();
                self.$nextTick(function () {
                  if(!this.clearAttr){
                    self.$scrollTop(0)
                    // document.body.scrollTop = 0;
                    // document.documentElement.scrollTop = 0;
                  }
                });
            }
            ,
            checkMenu: function (item, index) {
                this.finishFirstLoad = false
                let self = this;
                self.isHotActive = false;
                self.allLoaded = true;
              this.clearAttr =false;
                this.listQueryData.pageIndex = 1;
//              self.listQueryData.pageIndex++;
                self.displayList = [];
              self.listQueryData.firstPY = item;

                this.isAjax = false;
                self.displayIndex = 1;
                self.menuIndex = index;
//                self.updateDisplayListByFirst(item);
                self.$nextTick(function () {
                      self.$scrollTop(0)
                    // document.body.scrollTop = 0;
                    // document.documentElement.scrollTop = 0;
                });
                this.getGameList().then(()=>{
                  this.updateDisplayList();
                })

            }
            ,
            loadBottom()
            {
                let self = this;
                if(this.gameList.length<15){
                  return false
                }
                self.displayIndex++;
                this.clearAttr = true;
                this.listQueryData.pageIndex++;
                this.getGameList().then(()=>{
                  this.updateDisplayList();
                })
            }
            ,
            updateDisplayList: function () {
                let self = this;
                let max = self.displayIndex * self.displaySize < self.gameList.length ? self.displayIndex * self.displaySize :
                    self.gameList.length;

                if(this.isNameGo==this.gameList){

                }else{
                  this.isNameGo = this.gameList
                  for (let i = (self.displayIndex - 1) * self.displaySize; i < max; i++) {

                    self.displayList.push(self.gameList[i]);
                    self.isAjax = true
                  }

                }

                if (max == self.gameList.length) {
                    self.allLoaded = true;
                }

            }
            ,
//            updateDisplayListByFirst: function (item) {
//                let self = this;
//                for (let i = 0; i < self.gameList.length; i++) {
//                    if (self.gameList[i].pyfirst.toUpperCase() == item)
//                        self.displayList.push(self.gameList[i]);
//                }
//            }
//            ,
            changeGameType: function (gameType) {
                let self = this;
                this.isHotActive = true
                if (!self.finishFirstLoad || self.selectGameType == gameType)
                    return false;
                self.selectGameType = gameType;
                this.clearAttr =false;
                this.listQueryData.pageIndex = 1;
                this.listQueryData.pageSize = 15;
                this.listQueryData.firstPY = "HOT";
                this.isAjax = true
                self.menuQueryData.gameType = self.selectGameType;
                self.listQueryData.gameType = self.selectGameType;
                if(!this.clearAttr){
                  self.displayList = [];
                }
                self.finishFirstLoad = false;
                self.getMenuList();
                self.getGameList();
                self.$nextTick(function () {
                    self.checkHot();
                });


            }
            ,
            goSearchAll: function () {
                this.$router.push({
                    name: "SearchAll",
                    query: {type: 'special'}
                })
            },
        }
        ,
    }
</script>
<style src="css/search/search-game-cl.css"></style>
<style src="css/index-cl.css" scoped></style>

<style scoped>
    .swiper-container3 {
        white-space: nowrap;
        width: 100% !important;
        padding: 0;
    }

    .swiper-container3 .swiper-slide {
        display: inline-block;
        width: 20% !important;
    }

    .swiper-container3 .swiper-wrapper {
        width: 100%;
        margin-top: 0.96rem;
        padding: 0.3rem 0;
        height: auto;
    }

    .search-game img {
        margin: auto;
    }

    .home {
        overflow-x: hidden;
        overflow-y: auto;
        position: relative;
        width: 100%;
        height: auto;
        max-width: 768px;
    }

    .search-game .tab {
        display: block;
        overflow: hidden;
        height: auto;
        position: relative;
    }

    .search-game .tab-letter {
        overflow-y: auto;
        padding-bottom: 2.3rem;
        position: absolute;
        display: block;
        overflow-x: hidden;
    }

    .search-game .tab-class01 {
        margin-bottom: 0 !important;
        background-color: white;
    }

    .search-game .tab-letter-relative {
        position: relative;
    }

    .search-game .tab-letter-fixed {
        position: fixed !important;
        top: 1.63rem;
        overflow-y: auto;
    }

    .search-game .tab-body {
        background-color: #f1f1f1;
    }
    .search-game ul li{
        padding:0;
    }
    .search-game ul li {
        padding: 0;
    }

    .index-header {
        z-index: 20;
    }

    .index-header .index-header-search {
        width: 59%;
        float: left;
    }

    .index-header .index-header-search .text-input {
        background: #fff;
        padding-left: 0;
        text-align: center;
        width: 100%;
    }

    .index-header .index-header-search .text-input span {
        display: inline-block;
        background: url(~images/search4.png) no-repeat left center;
        background-size: .33rem;
        height: 0.72rem;
        padding-left: 0.45rem;
    }

    .dialog_cover {
        position: fixed;
        _position: absolute;
        left: 0;
        top: 0;
        display: block;
        z-index: 555;
        width: 100%;
        height: 100%;
        filter: alpha(opacity=70);
        opacity: 0.7;
        background: #000;
    }

    #dialog_show {
        left: 50%;
        margin-left: -3.6rem;
        opacity: 1;
        top: 3rem;
        /*transform: translate3d(-50%, 0, 0);*/
        position: fixed;
        width: 7.2rem;
        z-index: 1001;
        display: block;
    }

    .see {
        height: 0.48rem;
        line-height: 0.68rem;
    }

    .dialog-message {
        height: auto;
        display: block;
        overflow: hidden;
    }

    .fwright {
        display: block;
        background: url(~images/kefu/right.png) right center no-repeat;
        height: .5rem;
        width: .13rem;
        background-size: .13rem;
    }

    .fw > .tile {
        width: 95% !important;
    }

    .equipment-seach{ height:auto; display:block; overflow:hidden;position: relative;   padding: 0; background: #c9c9ce;}
    .container-ms{text-align: center;}
    .container-ms .container-inp { display: block; height:.60rem; line-height:.60rem; border-radius: .1rem;}
    .container-ms span{display: inline-block; padding-left: .45rem; background:url(~images/search4.png) no-repeat 0; background-size: .33rem; }
    .mb-95{margin-bottom:0.95rem !important;}

</style>

<style>
    #BackToTop {
        bottom: 1.2rem !important;
    }
</style>
